<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<!-- 发布者 查询信息 -->
				<view class="query-info card posts">
					<!-- 查询信息内容 -->
					<view class="header">
						<view class="title">
							{{ orderInfo.anjian_name }}
						</view>
					</view>
					<view class="content">
						<view class="content-item">
							<view class="content-item-label">订单编号：</view>
							<view class="content-item-value">{{ orderInfo.order_sn }}</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">订单金额：</view>
							<view class="content-item-value">{{ orderInfo.money_total  }}
							</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">订单类型：
							</view>
							<view class="content-item-value">{{orderInfo.category_title}}
							</view>
						</view>
						<view class="content-item">
							<view class="content-item-label">任务有效期(25/30)</view>
							<view class="content-item-value">
								<wd-progress :percentage="60" hide-text
									custom-class="wd-progress-custom-class-my-progress"
									:color="['#C91C1F', 'rgb(255, 153, 0)' ,'rgb(0,204, 0)' ]" />
							</view>
						</view>
					</view>
				</view>

				<wd-form ref="formRef" :rules=" rules" :model="formData" v-if="orderInfo.is_back===0">
					<view class="textarex card">
						<view class="header">
							<view class="title">
								退款原因
							</view>
						</view>
						<wd-input v-model="formData.back_case" prop="back_case"
							custom-class="wd-textarea-custom-class-fd-col bg-transparent square" no-border
							placeholder="退款原因"></wd-input>
					</view>
					<view class="textarex card">
						<view class="header">
							<view class="title">
								补充描述
							</view>
						</view>
						<wd-textarea prop="back_info" v-model="formData.back_info" clearable
							custom-class="wd-textarea-custom-class-fd-col bg-transparent square" label-width="100px"
							placeholder="补充描述"></wd-textarea>
					</view>
				</wd-form>

				<view class="footer">
					<view class="btns" v-if="orderInfo.is_back !== 1">
						<wd-button type="success" @click="submit"
							custom-class="wd-button-custom-class-my-cancel square wd-button-custom-class-w100">
							<text class="iconfont icon-sousuo"></text>
							申请售后
						</wd-button>
					</view>
					<!-- <view class="after-sales" v-if="[2,998].includes(status)">毁约赔偿</view> -->
				</view>

			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';

	import useRouter from '@/hooks/useRouter.ts';
	import { onLoad } from '@dcloudio/uni-app';
	import Step from "@/components/step/step"
	import { getCoopOrderInfo, doCoopOrderBack } from "@/api/coop"
	import { getQueryOrderInfo, doQueryOrderBack } from "@/api/query"
	export default defineComponent({
		name: '',
		components: { Step },
		setup(props, ctx) {
			const router = useRouter();
			// 日间light、夜间dark主题
			const theme = ref('light');
			const isPosts : any = ref(null)
			const status = ref(1);
			const isMeet = ref(true);
			const formRef = ref(null);
			const rules = ref({
				back_case: [
					{
						required: true,
						message: '请输入退款原因',
					}
				],
				back_info: [
					{}
				]
			});
			const formData = ref({
				back_case: "",
				back_info: "",
			});
			const orderInfo = ref({});
			const httpKey = {
				'coop': 'coo_order_id',
				'query': "query_order_id"
			}
			const httpApi = {
				'coop': getCoopOrderInfo,
				'query': getQueryOrderInfo,
			}

			const submitHttp = {
				'coop': doCoopOrderBack,
				'query': doQueryOrderBack,
			}
			let httpType : any = "coop"
			const stepList = ref([
				{ title: '发布成功（等待接单）', },
				{ title: '已接单（请耐心等待查询结果）', },
				{ title: '已提交（请及时核对查询结果）', },
				{ title: '已完成（该订单已结束）', },
			])
			const getData = () => {
				httpApi[httpType]({
					[httpKey[httpType]]: orderInfo.value.id,
				}).then(res => {
					orderInfo.value = res;
				})

			}
			const submit = () => {
				formRef.value.validate().then(({ valid }) => {
					// 提交表单数据到后端接口，例如：askOrderBack(formData.value).then(res => { ... });
					if (valid) {
						submitHttp[httpType]({
							...formData.value,
							[httpKey[httpType]]: orderInfo.value.id,
						}).then((res : any) => {
							uni.$wdToast.show("申请成功")
							setTimeout(() => {
								router.back({
									delta: 1,
								});
							}, 1000)
						});
					}

				})

			}
			onLoad((param : any) => {
				if (param.isPosts === 'true') {
					isPosts.value = true; // 设置isPosts的值为true，表示是帖子查询。
				} else if (param.isPosts === 'false') {
					isPosts.value = false; // 设置isPosts的值为true，表示是帖子查询。
				}
				if (param.type) {
					httpType = param.type; // 设置httpType的值为type参数的值。
				}
				if (param.id) {
					orderInfo.value['id'] = param.id;
					getData();
				} else {
					uni.$wdToast.show("没有订单信息")
					setTimeout(() => {
						router.back({
							delta: 1,
						})
					}, 1000); // 设置提示框显示时间，避免一直显示。
				}

			})
			return {
				theme,
				status,
				isPosts,
				stepList,
				isMeet,
				orderInfo,
				rules,
				formData,
				submit,
				formRef
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background: #f2f2f2;
	}

	.container {
		padding: 24rpx;
		padding-bottom: 180rpx;

		.query-info {
			padding: 24rpx;
			width: calc(100% - 24rpx - 24rpx);

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;

				padding-bottom: 24rpx;
				position: relative;

				&::after {
					position: absolute;
					bottom: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}

				.payment {
					display: flex;
					align-items: center;




					.payment-number {
						color: #C91C1F;
						font-size: 50rpx;
						margin-left: 20rpx;
					}
				}
			}

			.content {
				padding: 24rpx 0 0;

				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 10rpx 0;
					font-family: PingFang;
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;

					&-value {
						color: #000000;
						text-align: right;
						flex: 0 0 calc(100% - 260rpx);
					}

				}
			}

			.money-info {
				position: relative;
				padding-top: 24rpx;
				margin-top: 24rpx;
				// TODO 暂时隐藏
				display: none;

				&::before {
					position: absolute;
					top: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}

				.title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 24rpx;
					color: #C91C1F;
				}

				&-item {
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					font-family: PingFang;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;

					&-value {
						color: #C91C1F;
					}
				}
			}
		}

		.posts {
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				padding-bottom: 24rpx;
				position: relative;

				&::after {
					position: absolute;
					bottom: 0;
					content: " ";
					display: inline-block;
					width: 100%;
					height: 2rpx;
					background: #EEEEEE;
				}

				.title {
					font-family: PingFang;
					font-weight: bold;
					font-size: 38rpx;
					color: #000000;
					padding: 0;
					text-align: center;

					&::after {
						display: none;
					}
				}
			}
		}


		.textarex {
			margin-top: 24rpx;
			width: calc(100% - 24rpx - 24rpx);
			padding: 24rpx;

			.header {
				margin-bottom: 24rpx;
			}

			:deep(.wd-textarea__value) {
				padding: 0 !important;
			}

			:deep(.wd-textarea-custom-class-fd-col) {
				padding: 0 !important;
			}

			.wd-textarea-custom-class-fd-col {
				padding: 0 !important;
				margin-top: 24rpx;

				:deep(.wd-textarea__value) {
					padding: 0 !important;
				}
			}
		}

		.card {
			position: relative;
			overflow: hidden;

			&::before {
				content: " ";
				display: inline-block;
				width: 100%;
				height: 8rpx;
				background: #C91C1F;
				position: absolute; // 设置为绝对定位，使其位于card元素下方
				top: 0; // 设置为card元素的下边界位置，使其紧贴底部
				left: 0; // 设置为card元素的左边界位置，使其紧贴左侧
			}
		}


		.footer {
			position: fixed;
			width: calc(100% - 24rpx - 24rpx);
			padding: 0 24rpx;
			bottom: 0;
			left: 0;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #f2f2f2;

			.after-sales {
				font-family: PingFang;
				font-weight: bold;
				font-size: 22rpx;
				color: #000000;
				text-align: center;
				margin-top: 24rpx;
			}

			.btns {
				width: 100%;
				display: flex;

				justify-content: space-between;
				align-items: center;

				.square {
					flex: calc((100% - 27rpx) / 2);
					margin: 0;
					min-width: auto;

					.wd-button__text {
						display: flex;
						align-items: center; // 垂直居中
						justify-content: center; // 水平居中
						flex-direction: column; // 子元素垂直排列
					}

					.icon-fabu {
						font-size: 40rpx;
						margin-top: 24rpx;
					}
				}

				.square+.square {
					margin-left: 27rpx;
				}
			}
		}


	}
</style>